Repository navigation
Conversation
parseUnparsed rejects `auto` for every property outside allowAutoProperties, so `--my-var: auto` compiled to a warning and no declaration. A var() reading it fell through to the inherited value, the :root value or its fallback, even where the reading property takes `auto`. A custom property's value is any token list, so custom properties now keep `auto` and a var() substitutes it as written.
Contributor
There was a problem hiding this comment.
🟢 Approval recommended
There are no active review issues for the change preserving auto values in custom properties.
No open issues 🎉
What changed in this PR
This PR fixes the compiler dropping custom properties declared as auto, allowing var() reads to use the declared value rather than an inherited value or fallback.
Changes:
- Allow
autowhen parsing custom properties while retaining existing restrictions for other properties. - Add a regression test confirming a non-inlined custom property produces
width: "auto"instead of the fallback.
| File | Description |
|---|---|
src/compiler/declarations.ts |
Accepts auto for properties whose names begin with --. |
src/__tests__/native/variables.test.tsx |
Tests preservation of auto through a runtime var() read with a fallback. |
Review effort: Balanced
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
parseUnparsedrejectsautofor every property outsideallowAutoProperties, and custom properties are not in it.--my-var: autocompiles to a warning and no declaration, so avar()reading it falls through to the inherited value, the:rootvalue or its fallback. Onmain,.auto { --my-var: auto } .fixed { --my-var: 10px } .test { width: var(--my-var, 5px) }renderswidth: 5ontest auto, where browsers computewidth: auto.Solution
parseUnparsedallowsautofor custom properties. A custom property's value is any token list (css-variables-1 §2), sovar()substitutesautoas written and the reading property receives it.A property that cannot take
auto, such asopacity: var(--my-var), now receives"auto", where a browser treats the declaration as invalid at computed-value time. Neithermainnor this change matches that case, and #503 is where substituted values are validated.Tests
src/__tests__/native/variables.test.tsxcovers a custom property declared asautoand read bywidththroughvar()with a fallback. It fails onmain.Verification
On macOS with Node 24:
yarn lintcleanyarn typecheckcleanyarn test: 87 suites, 1390 tests pass